<template>
    <view class="post-comment-bar">
        <view class="bar-reply">
            <han-icon name="reply" />
            <text class="reply-hint">说点啥吧 ...</text>
        </view>

        <view class="bar-likes">
            <han-icon name="likes" size="42" />
            <text class="bar-text">点赞</text>
        </view>

        <view class="bar-collect">
            <han-icon name="collect" size="42" />
            <text class="bar-text">收藏</text>
        </view>

        <view class="bar-message">
            <han-icon name="message" size="42" />
            <text class="bar-text">评论</text>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
</script>

<style lang="scss">
.post-comment-bar {
    position: fixed;
    display: flex;
    align-items: center;
    z-index: 10;
    height: $han-footed-bar-height;
    border-top: 1rpx solid $han-global-border-color;
    bottom: 0;
    left: 0;
    right: 0;
    background: $han-global-bg-color;

    /* 适配iPhone安全区域 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);

    .bar-reply {
        width: 43%;
        padding-left: 20rpx;
        margin: 0 20rpx;
        border: 1rpx solid $han-global-border-color;
        border-radius: $han-border-radius-lg;

        .reply-hint {
            margin-left: 20rpx;
            font-size: $han-font-size-sm;
            color: $han-global-secondary-font-color;
        }
    }

    .bar-likes,
    .bar-collect,
    .bar-message {
        width: 19%;
        display: flex;
        justify-content: center;

        .bar-text {
            margin-left: 10rpx;
            font-size: $han-font-size-md;
        }
    }

    .bar-message {
        margin-right: 20rpx;
    }
}
</style>
